<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <title>{{$bookInfo->BookTitle}}</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            min-height:100vh;

        }
        body{
            padding:0 20px;
        }
        p{
            margin:0;
            padding:0;
        }
        .full{
            width:100%;
            display: block;
        }

        .fl{
            float: left;
        }
        .fr{
            float: right;
        }



        .foot{
            position: fixed;
            bottom:0;
            width:100%;
            background:white;
            left:0;
            overflow: hidden;
        }

        .foot .total{
            width:10vw;
            display: inline-block;
            float: right;
            margin-top:5px;
            margin-bottom: 5px;
            margin-right:15px;
        }

        .foot .total span,.foot .total img{
            display: block;
            height:25px;
            margin:auto;
            text-align: center;
            text-align: center;
            line-height: 25px;
            color:#F39800;
        }


        /*评论*/
        .comment{
            border-top:1px solid rgb(215,215,215);

        }

        .comment .comment-title{
            margin-top:20px;
            height:25px;
            line-height:25px;
            vertical-align: middle;

        }
        .comment .comment-title img{
            height:100%;
            width:auto;
            float: left;
            margin-right:5px;
        }
        .comment .comment-title span{
            height:100%;
            display: inline-block;
            float: left;
        }

        .comment-list{
            display: flex;
            padding:15px 4vw;
            border-bottom:1px solid rgb(215,215,215);
        }

        .comment-list .head-img{
            width:10vw;
        }

        .comment-list .head-img p{
            width:10vw;
            height:10vw;
            background-size: cover;
            background-position: center;
            border-radius: 50%;

        }

        .comment-info{
            flex: 1;
            margin-left:20px;
        }

        .comment-info .user-name{
            color: #F39800;
        }

        .comment-info .time-info{
            color:#999;
            font-size:0.9rem;
            line-height:1.6rem;
        }
        .comment-info .comment-content{
            color:rgb(78,78,78);
        }


        .article-title{
            line-height:1.5;
            font-weight: bold;
            color:#444;
            font-size:1.1rem;
            padding-top:20px;
            padding-bottom:10px;
        }

        .article-title em{
            color:#F39800;
        }

        .article-info{
            margin-bottom:20px;
            height:30px;
        }

        .article-info  span{
            float: left;
            line-height:30px;
        }

        .article-info img{
            height:25px;
            vertical-align: middle;
            width:auto;
            margin-left:10px;
            margin-right:10px;
        }

        /*书籍图片*/
        .bookImg{
            padding:15px 0;
            border-top:1px solid rgb(215,215,215);
            border-bottom: 1px solid rgb(215,215,215);
        }


        .bookImg img{
            width:35%;
            max-width:250px;
            margin:auto;
            display: block;
        }

        /*文字内容*/
        .plan-content{
            margin-top:20px;
        }

        .plan-content p{
            color:#666;
        }

        .plan-content span{
            color:#F39800;
        }
        .plan-content p{
            margin-bottom:10px;
            padding-bottom: 20px;
            border-bottom:1px dashed #F39800;
        }
        .plan-content p:nth-child(4){
            border:none;
        }

        .comment{
            border-top:1px solid rgb(215,215,215);

        }

        .comment .comment-title{
            margin-top:20px;
            height:25px;
            line-height:25px;
            vertical-align: middle;
        }
        .comment .comment-title img{
            height:100%;
            width:auto;
            float: left;
            margin-right:5px;
        }
        .comment .comment-title span{
            height:100%;
            display: inline-block;
            float: left;
        }

        .comment-list{
            display: flex;
            padding:15px 4vw;
            border-bottom:1px solid rgb(215,215,215);
        }

        .comment-list .head-img{
            width:10vw;
        }

        .comment-list .head-img p{
            width:10vw;
            height:10vw;
            background-size: cover;
            background-position: center;
            border-radius: 50%;

        }

        .comment-info{
            flex: 1;
            margin-left:20px;
        }

        .comment-info .user-name{
            color: #F39800;
        }

        .comment-info .time-info{
            color:#999;
            font-size:0.9rem;
            line-height:1.6rem;
        }
        .comment-info .comment-content{
            color:rgb(78,78,78);
        }

        video{
            background-color:#000;
            background-image:url('/images/default-images/video-bg.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position:center;
        }

    </style>
</head>
<body>



@if($readPlanInfo)
    <p class="article-title">{{$memberInfo->YourName}}的读书改进计划</p>
    <div class="article-info">
        <span>{{$readPlanInfo->AddDate}}</span>
        <span><img src="{{asset('images/app-web/small-logo.png')}}"></span>
        <span>教导读书会</span>
    </div>

@else
    <p class="article-title">《{{$bookInfo->BookTitle}}》</p>
    <div class="article-info">
        <span>{{date_time()}}</span>
        <span><img src="{{asset('images/app-web/small-logo.png')}}"></span>
        <span>教导读书会</span>
    </div>
@endif

<div class="bookImg">
    @if($bookInfo->IsGratis == 1)
        <video src="{{$bookInfo->mp4}}" controls  width="100%"></video>

    @else
        <img src="{{$bookInfo->FilePath1}}">
    @endif

</div>



@if($readPlanInfo)
    <div class="plan-content">
        <p>
            <span>周课：</span>
            {{emoji_text_decode($readPlanInfo->BookReview1)}}
        </p>
        <p>
            <span>自省：</span>
            {{emoji_text_decode($readPlanInfo->BookReview3)}}
        </p>
        <p>
            <span>行动：</span>
            {{emoji_text_decode($readPlanInfo->BookReview2)}}
        </p>
        <p>
            <span>贡献：</span>
            {{emoji_text_decode($readPlanInfo->BookReview4)}}
        </p>
    </div>
@endif

@if(count($comments) > 0)
    <div class="comment">
        <p class="comment-title"><img src="{{asset('images/sharepage/comment-icon.png')}}"><span>评论</span></p>
        <div class="comment-list-box">
            @foreach($comments as $comment)
                <div class="comment-list">
                    <div class="head-img">
                        <p style="background-image:url({{$comment->headImg}})"></p>
                    </div>
                    <div class="comment-info">
                        <p class="user-name">{{$comment->YourName}}</p>
                        <p class="time-info"><span>{{$comment->created_at}}</span><span></span></p>
                        <p class="comment-content">{{$comment->body}} </p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endif


<div style="height:50px;"></div>
<a class="foot" href="{{asset('downloadpage.html')}}">
    <img class="full" src="{{asset('images/sharepage/share-bottom.jpg')}}">
</a>



</body>
</html>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script>


    @if(!is_windows())

    window.onload = function(){

        //检查是否在小程序
        if(/mini/.test(location.href)){
            $('.foot').hide();
        }


        host = location.origin+"/";
        @if($readPlanInfo)
            var title   = "{{$memberInfo->YourName}}读《{{$bookInfo->BookTitle}}》的改进计划";
            var link    = host + "home/share_read_plan?userId={{$memberInfo->UserID}}&&bookId={{$bookInfo->BookID}}";
       @else
            var title   = "《{{$bookInfo->BookDesc}}》";
            var link    = host + "home/share_read_plan?bookId={{$bookInfo->BookID}}";
       @endif


        var imgUrl  = "{{$bookInfo->FilePath1}}";
        var desc    = "{{$bookInfo->BookDesc}}}";
        var groupTitle = desc + "\n" + title ;
        wx.config(<?php echo $weixinJs->config(array('onMenuShareAppMessage', 'onMenuShareTimeline'), false) ?>);
        wx.ready(function(){
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.onMenuShareTimeline({
                title: title, // 分享标题
                link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                //type:'music',
                //dataUrl:musicdata,
                success: function () {
                    // 用户确认分享后执行的回调函数

                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            //获取“分享给朋友”按钮点击状态及自定义分享内容接口
            wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                //type: 'music', // 分享类型,music、video或link，不填默认为link
                //dataUrl: musicdata, // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    //alert('ok');
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                    //alert('faile');
                }
            });
        });

    }
    @endif
</script>
